<template>
	<view class="container">
		<view class="fb-mobile">
			<view class="label">选择维修人员</view>
			<view class="mobile-box">
				<zqs-select
				  :multiple="true"
				  :list="options"
				  label-key="label"
				  value-key="value"
				  placeholder=" 请选择授权联系人"
				  title="选择授权联系人"
				  clearable
				  v-model="checkUserList"
				></zqs-select>
			</view>
		</view>
		
		<view class="fb-body">
			<textarea class="content" placeholder="请描述您要保修的内容..." @input="contentInput"
			 :maxlength="500" :auto-focus="true" v-model="repair.repairContent" />
      <!-- #ifndef MP-ALIPAY -->
			<view class="text-count">{{contentLength}}/500</view>
      <!-- #endif -->
		</view>
		<view class="fb-mobile">
			<view class="label">报修地址</view>
			<view class="mobile-box">
				<input class="mobile" placeholder="请输入报修地址" v-model="repair.repairPlace" />
			</view>
		</view>
		<view class="fb-mobile">
			<view class="label">报修人</view>
			<view class="mobile-box">
				<input class="mobile" placeholder="方便我们与你联系" v-model="repair.telephone" />
			</view>
		</view>
		<view class="fb-mobile">
			<view class="label">手机号码</view>
			<view class="mobile-box">
				<input class="mobile" maxlength="11" type="number" placeholder="方便我们与你联系" v-model="repair.telephone" />
			</view>
		</view>
		<view class="pic-box" style="margin-top: 60rpx;">
			<view class="pic-item" v-for="(item, index) in repair.fileList" :key="index">
			  <image :src="item.filePath" @tap="previewPic" :data-urls="item.filePath"></image>
			  <!-- <text class="pic-delete" @tap="handleDelete" :data-src="item" :data-goods-index="index">x</text> -->
			</view>
			<!-- <view class="pic-item pic-handle"  @tap="chooseImageTap" :data-goods-index="num">
			  <tui-icon name="camera"></tui-icon>
			  <text class="desc">添加图片</text>
			</view> -->
		</view>
		
		<tui-button class="fb-btn" type="danger" @click="takeRepair">接单</tui-button>
	</view>
</template>

<script>
	import zqsSelect from '@/components/zqs-select/zqs-select.vue'
	const util = require("@/utils/util.js")
	export default {
		components: { zqsSelect },
		data() {
			return {
				contentLength: 0,
				picTempleList:[],
				repair:{
					repairContent: '',
					mobile: '',
					userName:'',
					repairId:'',
					repairPlace:'',
				},
				checkUserList: [],
				importUserId: [],
				value: '',
				options: []
			}
		},
		onLoad(e) {
			this.repairId = e.id;
			// let userInfo = uni.getStorageSync('userInfo');
			// if(userInfo){
			// 	this.userName = userInfo.nickname;
			// 	this.mobile = userInfo.mobile;
			// }
			this.getInfo();
			this.userList();
		},
		methods: {
			handleDelete(e) {
				console.log("handleDelete..................................");
				let that = this;
				let item = e.currentTarget.dataset.src;
				let goodsIndex = e.currentTarget.dataset.goodsIndex;
				const keyVal = e.currentTarget.dataset.value;
				
				console.log(item);
				// let id = e.currentTarget.dataset.id;
				// let pics = e.currentTarget.dataset.pics || [];
				// pics = pics.filter(item => item != src);
				// this.refund.picUrls = pics
				util.request("upload/deleteFile",{
					id: item.id
				}).then(function(res) {
					console.log("11111111111111111111");
					console.log(res);
					if (res.code === 200) {
						
					}
				});
				
				// that.picTempleList.splice(goodsIndex,1);
			},

			contentInput: function(e) {
				let that = this
				that.contentLength= e.detail.cursor
				that.content= e.detail.value
			},
			getInfo :function(e) {
				let that = this;
				let url = "repair/"+this.repairId;
				util.request(url).then(function(res) {
					console.log(res);
					if (res.code === 200) {
						that.repair = res.data;
					}
				})
			},
			userList: function(e) {
				let that = this;
				let users = [];
				let url = "user/userList";
				util.request(url).then(function(res) {
					console.log(res);
					if (res.code === 200) {
						// res.data.forEach(element => {
						// 	users.push({ 
						// 		label: element.label,
						// 		value: element.id
						// 	});
						// });
						res.data.forEach(element => {
							users.push({ 
								label: element.label,
								value: element.label
							});
						});
						that.options = users;
					}
				})
			},
			takeRepair: function(e) {
				let that = this;
				
				console.log(that.checkUserList);
				let maintenanceMan = '';
				if(that.checkUserList.length >0 ){
					that.checkUserList.forEach(element => {
						maintenanceMan = maintenanceMan + ','+ element;
					})
				}
				util.request('repair/acceptRepair', {
					id:that.repairId,
					maintenanceMan: maintenanceMan,
					status: 1
				}).then(function(res) {
					if (res.code === 200) {
						uni.showModal({
							content: '您已经成功接单！',
							showCancel: false,
							success: function(res) {
								if (res.confirm) {
									uni.navigateBack();
								}
							}
						})
					}
				});
			},
			chooseImageTap: function(e) {
				let that = this;
				let goodsIndex = e.currentTarget.dataset.goodsIndex;
				uni.showActionSheet({
					itemList: ['从相册中选择', '拍照'],
					itemColor: "#ED3B2F",
					success: function(res) {
						if (!res.cancel) {
							if (res.tapIndex == 0) {
								that.chooseWxImage('album', goodsIndex)
							} else if (res.tapIndex == 1) {
								that.chooseWxImage('camera', goodsIndex)
							}
						}
					}
				})
			},
			chooseWxImage: function(type, goodsIndex) {
				let _this = this;
				let userToken = uni.getStorageSync('token');
				uni.chooseImage({
					sizeType: ['original', 'compressed'],
					sourceType: [type],
					success: function(res) {
						var tempFilePaths = res.tempFilePaths
						for (const key in tempFilePaths) {
							console.log(tempFilePaths[key])
							// util.uploadFile('upload/uploadForRepair', tempFilePaths[key]).then(function(res){
							// 	_this.goodsList[goodsIndex].pics.push(res.url);
							// })
							uni.uploadFile({
								url:util.interfaceUrl+'upload/uploadForRepair',
								filePath: tempFilePaths[key],
								name: 'file',
								header: {
									// #ifndef H5
									'content-type': 'multipart/form-data',
									// #endif
									'token': userToken
								},
								formData: {
									repairId:_this.repairId,
									fileType:'0'
								},
								success: function(ress) {
									console.log("====================================");
									console.log(ress);
									console.log("====================================");
									uni.hideLoading();
									let data = JSON.parse(ress.data.replace(/\ufeff/g, "") || "{}")
									console.log("-----------------------------------------------")
									console.log(data);
									
									console.log("-----------------------------------------------")
									if (data.code == 200) {
										//返回图片地址
										_this.picTempleList.push(data);
										console.log("-------------------------------2----------------")
										console.log(_this.picTempleList);
										console.log("--------------------------------2---------------")
									} else {
										//utils.toast(res.msg);
									}
								},
								fail: function(res) {
									console.log(res);
									//utils.toast("网络不给力，请稍后再试~")
								}
							});
						}
					}
				})
			},
		}
	}
</script>

<style>
	page {
		background: #f4f4f4;
		min-height: 100%;
	}

	.container {
		background: #f4f4f4;
		min-height: 100%;
		padding-top: 30rpx;
	}

	.fb-type {
		height: 104rpx;
		background: #fff;
		margin-bottom: 20rpx;
		display: flex;
		flex-direction: row;
		align-items: center;
		padding-left: 30rpx;
		padding-right: 30rpx;
	}

	.fb-type .type-label {
		height: 36rpx;
		flex: 1;
		color: #333;
		font-size: 28rpx;
	}

	.fb-body {
		background: #fff;
		height: 374rpx;
		padding: 18rpx 30rpx 64rpx 30rpx;
	}

	.fb-body .content {
		height: 100%;
		color: #333;
		line-height: 40rpx;
		font-size: 28rpx;
	}

	.fb-body .text-count {
		padding-top: 17rpx;
		line-height: 30rpx;
		float: right;
		color: #666;
		font-size: 24rpx;
	}

	.fb-mobile {
		height: 162rpx;
	}

	.fb-mobile .label {
		height: 58rpx;
		padding: 30rpx 0 0 30rpx;
		color: #7f7f7f;
		font-size: 24rpx;
	}

	.fb-mobile .mobile-box {
		height: 104rpx;
		color: #333;
		padding-left: 30rpx;
		padding-right: 30rpx;
		font-size: 24rpx;
		background: #fff;
		position: relative;
	}

	.fb-mobile .mobile {
		position: absolute;
		top: 27rpx;
		left: 30rpx;
		height: 50rpx;
		color: #333;
		line-height: 50rpx;
		font-size: 24rpx;
	}

	.fb-btn {
		width: 100%;
		position: fixed;
		bottom: 0;
	}
	.pic-box {
		margin-top: 20rpx;
	font-size: 22rpx;
		padding: 0 20px 20px 20px;
		display: flex;
		flex-wrap: nowrap;
	}
	
	.pic-item {
		position: relative;
		width: 200rpx;
		height: 200rpx;
		margin-right: 10px;
		display: inline-block;
	}
	
	.pic-item image {
		width: 100%;
		height: 100%;
	}
	
	.pic-item .pic-delete {
		position: absolute;
		width: 30rpx;
		height: 30rpx;
		text-align: center;
		color: #fff;
		line-height: 30rpx;
		top: -15rpx;
		right: -15rpx;
		border-radius: 50%;
		background-color: red;
	}
	
	.pic-handle {
		display: inline-flex;
		align-items: center;
		justify-content: center;
		flex-direction: column;
		border: 1px solid #ccc;
		border-radius: 20rpx;
	}
	
	.pic-item.pic-handle image {
		width: 100rpx;
		height: 100rpx;
	}
	
	.pic-handle .desc {
		padding-top: 10px;
		font-size: 0.9em;
		color: #9b9b9b;
	}
	
	.btn-box {
		margin: 20px 0;
		padding: 10px 20px;
	}
</style>
